// 引入axios
import axios from "axios";
// 引入nanoid
import {nanoid} from "nanoid";

/* store模块化：将不同组件使用的store分成不同的模块进行管理 */

// 人员相关的配置
export default {
    // namespaced配置项：使用了Vuex模块化编码后，为了让每个store模块都有自己的标识名称（方便在要使用的组件上直接写对象名引用）
    // 该配置项设置为true后，组件内可以以："...mapState('模块对象名' ,['属性名','属性名']);" 的方式直接在模板中写属性名
    namespaced:true, // 开启命名空间
    actions:{
        // 添加人员信息
        addPerson(context,value){
            context.commit('ADDPERSON' ,value);
        },

        // 添加一个姓覃的人
        addPersonQin(context,value){
            if(value.name.indexOf('覃') === 0){  // value.name.indexOf('str')：获取指定str的下标
                context.commit('ADDPERSON' ,value);
            }else {
                alert('添加的人必须姓覃');
            }
        },

        // 在actions中发起一个请求，通过API返回的数据，添加一个人员
        addPersonFromServer(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    // 调用添加人员信息的mutasions，将人员信息封装成一个对象发送过去
                    context.commit('ADDPERSON' ,{id:nanoid() ,name:response.data});
                },
                error => {
                    alert(error.message);
                }
            )
        }
    },
    mutations:{
        // 添加人员信息
        ADDPERSON(state,value){
            console.log('mutations中的ADDPERSON被调用了');
            // 添加
            state.personList.unshift(value);
        }
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    },
    state:{
        personList:[ // 人员信息
            {id:'001' ,name:'覃小宝'},
            {id:'002' ,name:'张三'},
            {id:'003' ,name:'李四'},
        ],
    }
}